<template>
  <div class="find">
    <div class="top">
      <div class="back">
        <van-icon size="20" color="#999" name="arrow-left" />
      </div>
      <div class="right">
        <div class="search-box am-flexbox">
        <div class="search am-flexbox">
          <div class="location">
            <span class="name">上海</span>
            <van-icon name="arrow-down" size="12"></van-icon>
          </div>
          <div class="form">
            <van-icon name="search"></van-icon>
            <input placeholder="请输入小区或地址" />
          </div>
        </div>
        <van-icon name="location-o" size="22px" color="#00ae66"></van-icon>
      </div>
      </div>
    </div>
    <!-- 下拉框 -->
    <div class="dropdown">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="option" />
        <van-dropdown-item title="方式" ref="item"> </van-dropdown-item>
        <van-dropdown-item title="租金" ref="item"></van-dropdown-item>
        <van-dropdown-item title="筛选" ref="item">
          <van-popup
            v-model="show"
            position="right"
            :style="{ width: '60%' }"
          />
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!-- 主体内容 -->
    <div class="main">
      <div class="house">
        <!-- 找房子 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            @click="fn(item.houseCode)"
            class="house-content"
            v-for="(item,index) in list"
            :key="index"
          >
            <div class="left">
              <img :src="houseImg + item.houseImg" alt="" />
            </div>
            <div class="right">
              <h3 class="title container">{{ item.title }}</h3>
              <div class="one">
                <span class="xing">{{ item.desc }}</span>
              </div>
              <div class="two container">
                <span v-if="item.tags[0]" class="tie tag1">{{
                  item.tags[0]
                }}</span>
                <span v-if="item.tags[1]" class="tie tag2">{{
                  item.tags[1]
                }}</span>
                <span v-if="item.tags[2]" class="tie tag3">{{
                  item.tags[2]
                }}</span>
                <span v-if="item.tags[3]" class="tie">{{ item.tags[3] }}</span>
                <span v-if="item.tags[4]" class="tie">{{ item.tags[4] }}</span>
              </div>
              <div class="three">
                <span>{{ item.price }}</span
                >元/月
              </div>
            </div>
          </div>
          <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { housesApi } from '@/api/house'
export default {
  name: 'FindPage',
  data () {
    return {
      value: 0,
      show: true,
      option: [{ text: '区域', value: 0 }],
      list: [],
      houseImg: 'http://124.223.73.204:8080',
      finished: false,
      loading: false,
      start: 1,
      cityId: 'AREA|88cff55c-aaa4-e2e0'
      // cityId: '5cc4494549926d0e2b94c816'
    }
  },
  methods: {
    onSearch () {},
    onConfirm () {
      this.$refs.item.toggle()
    },
    fn (id) {
      this.$router.push({
        path: `/detail/${id}`
      })
    },
    async onLoad () {
      // 异步更新数据
      const res = await housesApi({
        cityId: this.cityId,
        start: this.start,
        end: 20
      })
      this.list.push(...res.data.body.list)
      this.$toast(`共找到 ${res.data.body.count} 房源`)
      this.start++
      this.loading = false
      this.finished = (this.list.length === res.data.body.count) && true
    }
  },
  async created () {
    // const res = await housesApi()
    console.log('城市创建了')
  },
  destroyed () {
    console.log('城市销毁了')
  }
}
</script>

<style lang="less" scoped>
.am-flexbox {
  text-align: left;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.find {
  background-color: #f6f5f6;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 45px;
  padding: 0 10px;
  .back {
    flex: 1;
  }
  .right {
    .search-box {
    //搜索
    z-index: 99;
    width: 100%;
    padding: 0 10px;
    .location {
      .name {
        margin-right: 4px;
        font-size: 14px;
      }
    }
    .search {
      flex: 1 1;
      // height: 34px;
      margin: 0 10px;
      padding: 5px 5px 5px 8px;
      border-radius: 3px;
      background-color: #fff;
      // .van-icon-location-o {}
      .form {
        border-left: solid 1px #e5e5e5;
        margin-left: 12px;
        line-height: 16px;
        input {
          border: 0;
          padding-left: 4px;
          font-size: 13px;
          color: #9c9fa1;
        }
        .van-icon {
          vertical-align: middle;
          padding: 0 2px 0 12px;
          color: #9c9fa1;
          font-size: 15px;
        }
      }
    }
  }
  }
}
// 下拉框
.dropdown {
  border-bottom: 1px solid #e4e6f0;
}
// 主体内容
.main {
  margin-bottom: 50px;
  padding: 0 15px;
  line-height: 22px;
  background-color: #fff;
  .house-content {
    width: 345px;
    height: 110px;
    padding: 18px 0 0;
    border-bottom: 1px solid #e5e5e5;
    // overflow: hidden;
    .left {
      float: left;
      img {
        width: 106px;
        height: 80px;
      }
    }
    .right {
      float: left;
      padding-left: 18px;
      overflow: hidden;
      .title {
        margin: 0;
        font-size: 15px;
        color: #394043;
      }
      .one {
        font-size: 12px;
        color: #afb2b3;
      }
      .two {
        font-size: 12px;
        .tie {
          display: inline-block;
          font-size: 12px;
          border-radius: 3px;
          padding: 4px 5px;
          margin-right: 5px;
          line-height: 12px;
        }
        .tag1 {
          color: #39becd;
          background-color: #e1f5f8;
        }
        .tag2 {
          color: #3fc28c;
          background: #e1f5ed;
        }
        .tag3 {
          color: #5aabfd;
          background: #e6f2ff;
        }
      }
      .three {
        color: #fa5741;
        span {
          font-size: 16px;
          font-weight: bolder;
        }
      }
    }
  }
}
.container {
  width: 200px; /* 设置容器的固定宽度 */
  white-space: nowrap; /* 强制文本在一行内显示 */
  overflow: hidden; /* 隐藏超出容器宽度的部分 */
  text-overflow: ellipsis; /* 将溢出的文本显示为省略号 */
}
</style>
